<template>
  <div style="height: 100%">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :key="index" v-for="(item, index) in breadcrumbItems">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="table-wrap-box">
      <el-container>
        <el-aside class="side-wrap" width="220">
          <SideCategoryMenu :categoriesTree="categoriesTreeData" @add-btn-click="addCategory"
            @del-btn-click="delCategory" @edit-btn-click="editCategory" @tree-node-click="treeNodeClickHandler"
            @tree-node-cancel-check="treeNodeCancelCheckHandler" />
        </el-aside>
        <el-main class="main-wrap">
          <div style="width: 160px;display: flex;justify-content: space-around;margin-bottom: 4px">
            <el-button size="mini" @click="">
              <svg-icon class-name="svg-icon" icon-class="save"></svg-icon>
              保存
            </el-button>
            <el-button size="mini" icon="el-icon-plus" type="primary" @click="addPublish">新增</el-button>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="">删除</el-button>
          </div>

          <el-table :data="featurePublishData" :max-height="500" :border=true fit row-key="id" size="mini"
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
              align="center">
              <template slot-scope="scope">
                <span v-if="item.oper">
                  <el-button size="mini" type="text" @click="previewDetailClick(scope.row)">详情</el-button>
                  <el-button size="mini" type="text" @click="rowPublishClick(scope.row)">{{ getBtnText(scope.row)
                  }}</el-button>
                  <el-button size="mini" type="text" style="color: #f56c6c"
                    @click="rowDelClick(scope.row)">删除</el-button>
                </span>
                <span v-else>
                  {{ scope.row[item.prop] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>
<script>
import SideCategoryMenu from "@/components/feature/SideCategoryMenu";
import CategoryForm from "@/components/feature/CategoryForm.vue";
import { useFormDialog } from "@/components/formDialog/FormDialog";
import '@/assets/css/featureLayout.css';
import { $FeaturePublishApi } from "@/network/feature/FeaturePublishApi";
import FeaturePublishForm from "@/components/feature/publish/FeaturePublishForm.vue";
import FeatureDetailForm from "@/components/feature/publish/FeatureDetailForm.vue";

export default {
  name: "FeaturePublishManage",
  components: { SideCategoryMenu },
  data() {
    return {
      breadcrumbItems: [],
      categoriesTreeData: [],
      selectNode: null, // 当前选择的分类节点
      featurePublishData: [],
      columns: [
        { prop: 'publishName', label: '名称', oper: false, editState: false },
        { prop: 'featureLabels', label: '关联业务对象', oper: false, editState: false },
        { prop: 'statusName', label: '状态', oper: false, editState: false },
        { prop: 'databaseName', label: '数据库', oper: false, editState: false },
        { prop: '', label: "操作", oper: true, editState: false }
      ]
    }
  },
  methods: {
    addCategory() {
      let parentId, parentLabel;
      if (this.selectNode) {
        parentId = this.selectNode.id;
        parentLabel = this.selectNode.name;
      }
      useFormDialog({
        title: "添加分类",
        width: "700px",
        formProps: {
          parentId,
          parentLabel
        },
      }, CategoryForm, (data) => {
        this.saveCategory(data);
      }, () => { })
    },

    async saveCategory(data) {
      let res = await $FeaturePublishApi.addCategory(data);
      this.ShowMessage(res);
      await this.loadCategroyTreeData();
    },

    async delCategory() {
      if (!this.selectNode) {
        this.ShowMessage("请选择要删除的节点");
        return;
      }

      this.$confirm('将删除选择的分类, 是否继续?', { type: "warning" }).then(async () => {
        let res = await $FeaturePublishApi.removeCategory({ id: this.selectNode.id });
        this.ShowMessage(res);
        await this.loadCategroyTreeData();
        this.selectNode = null;
      }).catch(err => {
        this.$message.success("取消操作");
      })
    },

    editCategory() {

    },

    treeNodeClickHandler(node) {
      let { id, name, label, parentId, parentLabel } = { ...node };
      this.selectNode = { id, name, label, parentId, parentLabel };
      this.loadFeaturePublishData();
    },

    // 分类树节点取消选中
    treeNodeCancelCheckHandler() {
      this.selectNode = null;
      this.loadFeaturePublishData({});
    },

    async loadCategroyTreeData() {
      const res = await $FeaturePublishApi.listCategoryTree({});
      this.categoriesTreeData = res.data;
    },

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    addPublish() {
      if (!this.selectNode) {
        this.$message.info("请选择分类");
        return;
      }
      useFormDialog({
        title: '新增发布',
        width: '1000px',
        confirmText: "确定",
        formProps: {
          categoryId: this.selectNode.id,
          categoryName: this.selectNode.name
        }
      }, FeaturePublishForm, async (data) => {
        let res = await $FeaturePublishApi.saveFeaturePublish(data);
        this.ShowMessage(res);
        await this.loadFeaturePublishData();
      }, null);

    },

    handleSelectionChange() {

    },

    // 查询发布特征数据列表
    async loadFeaturePublishData() {
      const res = await $FeaturePublishApi.listFeaturePublishInfo({
        categoryId: this.selectNode ? this.selectNode.id : ""
      });
      this.featurePublishData = res.data;
    },

    rowPublishClick(row) {
      this.$confirm("确定发布选择的对象?", "提示").then(async () => {
        let params = {
          recordId: row.recordId,
          publishStatus: row.status === 'unpublish' ? "new_publish" : row.status === 'published' ? "update_publish" : "update_publish",
        }
        const res = await $FeaturePublishApi.doPublish(params);
        this.ShowMessage(res);
        await this.loadFeaturePublishData();
      }).catch(err => {
        console.log(err);
      })
    },

    async rowDelClick(row) {

      this.$confirm('将删除选择的发布记录, 是否继续?', { type: "warning" }).then(async () => {
        const { recordId, databaseId } = row;
        const params = {
          recordId, databaseId
        }
        const res = await $FeaturePublishApi.removePublish(params)
        this.ShowMessage(res);
        await this.loadFeaturePublishData();
      }).catch(err => {
        this.$message.success("取消操作");
      })
    },

    previewDetailClick(row) {
      useFormDialog({
        title: "特征发布详情",
        width: "1000px",
        recordId: row.recordId
      }, FeatureDetailForm, () => { }, () => { });
    },

    getBtnText(row) {
      return row.status === 'unpublish' ? "发布" : row.status === 'published' || row.status === 'update_publish' ? "更新发布" : "";
    }

  },
  watch: {
    $route: {
      handler: function (newRoute, oldRoute) {
        this.breadcrumbItems = ['特征中心', newRoute.meta.description];
        this.curKind = newRoute.meta.name;
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.loadCategroyTreeData();
    this.loadFeaturePublishData();
  }

}
</script>
<style></style>